<template>
	<view>
		<view class="info">
			<image :src="orderInfo.recovery_user_avatar" mode=""></image>
			<view class="name">
				{{orderInfo.recovery_user_text}}
			</view>
		</view>
		<view class="progress">
			<view class="first" @click="evaluate_type = 0" :class="{active:evaluate_type == 0}">
				<image :src="evaluate_type == 0?'../../static/evaluate_01.png':'../../static/evaluate_02.png'" mode=""></image>
				<view>很满意</view>
			</view>
			<view class="first" @click="evaluate_type = 1" :class="{active:evaluate_type == 1}">
				<image :src="evaluate_type == 1?'../../static/evaluate_03.png':'../../static/evaluate_04.png'" mode=""></image>
				<view>满意</view>
			</view>
			<view class="first" @click="evaluate_type = 2" :class="{active:evaluate_type == 2}">
				<image :src="evaluate_type == 2?'../../static/evaluate_05.png':'../../static/evaluate_06.png'" mode=""></image>
				<view>不满意</view>
			</view>
		</view>
		<view class="text">
			<textarea v-model="evaluate" placeholder="请您对本次回收员的服务进行评价~" />
		</view>
		<div class="input" @click="submit">
			<button>提交</button>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				evaluate:"",
				evaluate_type:0,
				orderInfo:{}
			}
		},
		methods: {
			getDetail(id) {
				this.$post('release/releaseinfo', {
					id
				}, (res) => {
					this.orderInfo = res;
				})
			},
			submit(){
				if(!this.evaluate && this.evaluate != 0){
					uni.showToast({title:"请输入您对回收员的评价！",icon:"none"});
					return
				}
				this.$post('user/releaseevaluate', {
					id:this.id,
					evaluate:this.evaluate,
					evaluate_type:this.evaluate_type,
				}, (res) => {
					uni.showToast({
						title:"提交成功！",
					})
					uni.navigateBack({})
				})
			}
		},
		onLoad(option) {
			if (option.id) {
				this.id = option.id;
				this.getDetail(option.id)
			}
		},
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
	.info{
		padding-top: 45rpx;
		text-align: center;
		padding-bottom: 40rpx;
		border-bottom: 20rpx solid #F6F6F6;
	}
	.info image{
		width: 128rpx;
		height: 128rpx;
		border-radius: 50%;
	}
	.info .name{
		font-size: 36rpx;
	}
	.progress{
		display: flex;
		padding: 30rpx 0;
		border-bottom: 20rpx solid #F6F6F6;
	}
	.progress .first{
		flex: 1;
		text-align: center;
	}
	.progress .first image{
		width: 92rpx;
		height: 92rpx;
	}
	.progress .first{
		margin-top: 17rpx;
	}
	.progress .first view{
		color: #999999;
	}
	.progress .first.active view{
		color: #03CA8F;
	}
	.text{
		padding: 40rpx 30rpx;
	}
	.text textarea{
		border-radius: 6rpx;
		border: 1px solid #E5E5E5;
		width: 100%;
		height: 286rpx;
		padding: 25rpx;
		box-sizing: border-box;
		font-size: 28rpx
	}
	.input {
		margin: 0 auto;
		width: 630rpx;
		margin-top: 80rpx;
	}
	
	.input button {
		color: #FFFFFF;
		font-size: 34rpx;
		text-align: center;
		height: 98rpx;
		line-height: 98rpx;
		background: #22BF8A;
		border-radius: 8px;
	}
</style>
